<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		
		<!--
			注意：1:vue的作用范围，在没有vue覆盖的区域vue的语法不适用
			     2：html标签的title属性,hover时出现提示说明
		-->
		<div class="app">
			<span  v-bind:title="tit"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
			<!--通过v-if控制元素是否显示，sh是布尔值，js表达式-->
			<p v-if="sh">我显示</p>
		</div>
			<div class="app1">
				<span title="DSKLGHISDGHSDGKHG">
			  鼠标悬停几秒钟查看此处动态绑定的提示信息！
		</span></div>
		
		<!--alt 用于图片没显示时在图片显示区域显示一个说明文字。
			
			
		-->
		<img title="hover图片出现文字" alt="由于某些原因图片没有显示" src="https://p1.ssl.qhimg.com/t0151320b1d0fc50be8.png"/>
			
			<script type="text/javascript" src="vue.js"></script>
			<script type="text/javascript">
				var vue = new Vue({
					el: ".app",
					data: {
						tit: "上的考虑更换" + new Date().toLocaleString(),
						sh:false
					}
				})
			</script>

	</body>

</html>